<template>
  <div>
    <ex-dialog
      width="60%"
      class="ex-diolog"
      title=""
      :visible="visible"
      @closeDialog="handleClose"
    >
      <template>
        <div v-loading="loading">
          <div class="info_box">
            <div class="info_head">账户信息（{{ info.merchantName }}）</div>
            <div class="info_detail">
              <div class="detail_box">
                <span class="detail_lable">蜜链盟商户编号：</span>
                <span>{{info.merchantId}}</span>
              </div>
              <div class="detail_box">
                <span class="detail_lable">最后更新时间：</span>
                <span>{{info.updateTime}}</span>
              </div>
              <div class="detail_box">
                <span class="detail_lable">商户账号名称：</span>
                <span>{{info.merchantName}}</span>
              </div>
              <div class="detail_box">
                <span class="detail_lable">店铺名称：</span>
                <span>{{info.shopName}}</span>
              </div>
              <div class="detail_box">
                <span class="detail_lable">商家类型：</span>
                <span v-if="info.entryMerchantType==1">普通商家</span>
                <span v-if="info.entryMerchantType==2">连锁商家</span>
              </div>
            </div>
          </div>
          <div class="info_box">
            <div class="info_head">第三方日常消费账户结算信息</div>
            <div class="info_detail">
              <div class="detail_box">
                <span class="detail_lable">第三方日常消费账户：</span>
                <span>{{info.everydayAccount}}</span>
              </div>
              <div class="detail_box">
                <span class="detail_lable">结算方式：</span>
                <span>{{info.everydaySettleBankTypeDict}}</span>
              </div>
              <div class="detail_box">
                <span class="detail_lable">结算账户名称：</span>
                <span>{{info.everydaySettleName}}</span>
              </div>
              <div class="detail_box">
                <span class="detail_lable">结算银行：</span>
                <span>{{info.everydayBankName}}</span>
              </div>
              <div class="detail_box">
                <span class="detail_lable">结算卡号：</span>
                <span>{{info.everydayAccountNo}}</span>
              </div>
              <div class="detail_box">
                <span class="detail_lable">费率：</span>
                <span>{{info.everydayFee}}</span>
              </div>
            </div>
          </div>
          <div class="info_box" v-if="info.depositAccount">
            <div class="info_head">第三方存管账户结算信息</div>
            <div class="info_detail">
              <div class="detail_box">
                <span class="detail_lable">第三方存管账户：</span>
                <span>{{info.depositAccount}}</span>
              </div>
              <div class="detail_box">
                <span class="detail_lable">结算方式：</span>
                <span>{{info.depositSettleBankTypeDict}}</span>
              </div>
              <div class="detail_box">
                <span class="detail_lable">结算账户名称：</span>
                <span>{{info.depositSettleName}}</span>
              </div>
              <div class="detail_box">
                <span class="detail_lable">结算银行：</span>
                <span>{{info.depositBankName}}</span>
              </div>
              <div class="detail_box">
                <span class="detail_lable">结算卡号：</span>
                <span>{{info.depositAccountNo}}</span>
              </div>
              <div class="detail_box">
                <span class="detail_lable">费率：</span>
                <span>{{info.depositFee}}</span>
              </div>
                <div class="detail_box">
                <span class="detail_lable">冻结余额：</span>
                <span>{{info.freezeBalance}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="btn_box">
          <el-button type="primary" @click="handleClose">返回</el-button>
        </div>
      </template>
    </ex-dialog>
  </div>
</template>
<script>
// components
import Loading from "@/components/Loading/index";

// api
import { managedetail } from "@/api/moneyManagement";
export default {
  components: {
    Loading,
  },
  props: {
    visible: Boolean,
    id: String,
    statusType: String,
  },
  data() {
    return {
      info: {},
      loading: true,
    };
  },
  computed: {},
  created() {
    this.getDetail();
  },
  methods: {
    getDetail() {
      //获取详情
      this.loading = true;
      managedetail(this.id)
        .then((res) => {
          this.info = res.result;
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleClose() {
      this.$emit("update:visible", false);
    },
  },
};
</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
  }
  .main {
    margin: 0 auto;
  }
  .info_box {
    margin-bottom: 10px;
  }
  .info_head {
    font-size: 18px;
    font-weight: bold;
    color: #444;
  }
  .info_detail {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 30px 0 0 20px;
  }
  .detail_box {
    min-width: 50%;
    font-size: 15px;
    color: #606266 !important;
    margin-bottom: 15px;
  }
  .detail_lable {
    color: #444;
  }
  .btn_box {
    width: 100%;
    margin-top: 40px;
    display: flex;
    justify-content: center;
  }
  .btn_box button {
    width: 120px !important;
  }
}
</style>
